<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="root">
      	<child>
      		<!-- 当子组件用slot的时候会传递item数据.item在pros属性中 -->
      		<template slot-scope="props">
      			<li>{{props.item}}</li>
      		</template>
      	</child>
    </div>
    <script type="text/javascript">
    Vue.component('child', {
    	data:function(){
    		return{
    			list:[1,2,3,4,5]
    		}
    	},
        template: `<div>
        			 <ul>
        			 	<slot v-for="item of list" :item=item>
        			 		{{item}}
        			 	</slot>
        			 </ul>
         		  </div>`
    })
    var vm = new Vue({
        el: "#root"
    })
    </script>
</body>
</html>